<template>
    <div>
    <div id="main" style="width:500px;height:300px;"></div>
    <!-- 请输入问题<el-input v-model="mes"></el-input>
    <el-button @click="submit">提交</el-button>
    {{answer}} -->
  
    </div>
  </template>
  
  <script setup>  
  import { ref,onMounted } from 'vue'  
  import * as echarts from 'echarts';
  
  
  const orderlist = ref([1001,1002,1003])
  const countlist = ref([100,200,50])
  const websocket =ref()
  
  const initwebsocket=()=>{
      websocket.value = new WebSocket("ws://localhost:8000/room/home");
      websocket.value.onopen =  (event)=>{
        console.log('连接成功')
      }
      websocket.value.onmessage =  (event)=>{          
          console.log(event.data);          
          
          console.log(JSON.parse(event.data))
          countlist.value = JSON.parse(event.data) 
          initecharts()
      }
                  
  }
  const initecharts=()=>{
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
  
  option = {
    xAxis: {
      type: 'category',
      data:orderlist.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: countlist.value,
        type: 'line'
      }
    ]
  };
  
  option && myChart.setOption(option);
  }
  
  onMounted(() => { 
      initwebsocket()
      initecharts() 
  }) 
  </script>
  
  <style>
  
  </style>